@keyframes roX {
   0%{
       transform: rotateX(180deg);
   }
   100%{
       transform: rotateX(0deg);
   }
}

.skill-showed{
    width: 1200px;
    margin: 30px auto;
    height: 240px;   
    background: rgba(22,68,130,.3); 
    box-shadow: 0 0 10px 10px rgba(44,168,219,.4);
    border-radius: 10px;
    display: flex;
    position: relative;
    animation: roX 1s linear;
}

@keyframes light-move {
    0%{ 
        background-position: 0 0;
    } 
    100%{ 
        background-position: 0 240px;
    } 
}  

.skill-showed .light{
    position: absolute;
    top: 0; 
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 10px;
    background: linear-gradient(-30deg,rgba(27,212,201,.3),rgba(22,68,130,.3));
    animation: light-move 3.2s linear forwards;
}
 
.skill-item{
    flex: 1;
    position: relative;
}

.skill-item .word{
    position: absolute;
    left: 0;
    right: 0;
    top: 74%;
    text-align: center;
    font-size: 20px;
    color: white;
}


